<template>
    <div class="person_help">
        <x-header :left-options="{backText: ''}" >示范党课</x-header>
          <div class="lesson_lists">
              <template v-for="(item,index) of demo">
                    <router-link tag="div" class="list" :to="{name: 'DemoDetail', params:{demoid:item.id}}" :key="index">
                        <div class="list_text">
                            <div class="list_title">{{item.title}}</div>
                            <div class="list_time">{{item.create_time}}</div>
                        </div>
                        <div class="list_img" v-if="item.img">
                            <img :src="item.img" alt="">
                        </div>
                    </router-link>
                </template>
          </div>
    </div>
</template>

<script>
import { XHeader } from "vux";
import { mapGetters } from "vuex";
export default {
  components: {
    XHeader
  },
  computed: {
    ...mapGetters(["personDemo"])
  },
  created() {
    this.$store.dispatch("getPersonDemo", {
      teacher_id: this.$route.params.personid
    });
  },
  activated() {
    this.$store.dispatch("getPersonDemo", {
      teacher_id: this.$route.params.personid
    });
  },
  deactivated() {
    this.demo = [];
  },
  watch: {
    personDemo: function(val) {
      this.demo = val;
    }
  },
  data() {
    return {
      demo: []
    };
  },
  methods: {}
};
</script>

<style lang="less">
.person_help {
  width: 100%;
  min-height: 100%;
  font-size: 0;
  background: rgb(245, 245, 249);
  .lesson_lists {
    padding: 2.875rem 0.625rem 0;
    background: rgb(255, 255, 255);
    .list {
      box-sizing: border-box;
      width: 100%;
      /*padding: .25rem .75rem;*/
      padding: 0.25rem 0;
      display: flex;
      border-bottom: 1px solid rgb(237, 238, 240);
    }
    .list_img {
      width: 7rem;
      height: 3.9375rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list_text {
      flex: 1;
      .list_title {
        font-size: 1.0625rem;
        color: rgb(51, 51, 51);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .list_time {
        margin-top: 0.625rem;
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
      }
    }
  }
}
</style>